<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 - Table with Yellow Triangle</title>

    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/css/bootstrap.min.css" rel="stylesheet">


    <style>
        /* 为特定td添加自定义类，方便应用倒三角形样式 */
        .triangle-cell {
            position: relative;
            /* 可选：添加内边距以确保倒三角形与td内容之间有足够的空间 */
            padding-top: 20px;
        }

        .triangle-cell::before {
            content: "";
            position: absolute;
            top: -10px; /* 调整以改变倒三角形与td顶部的距离 */
            left: 50%; /* 将倒三角形居中对齐 */
            transform: translateX(-50%); /* 实现水平居中 */
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 10px 10px 0 10px; /* 调整边框宽度以改变倒三角形大小 */
            border-color: #FFC107 transparent transparent transparent; /* 黄色三角形，第一个颜色是填充色，后面三个是透明 */
        }

        /* 设置 div 背景透明 */
    .div {
    position: relative; /* 确保伪元素的位置相对于 div */
    background-color: rgba(0, 0, 0, 0.5); /* 使用 rgba 设置背景颜色透明度，这里为50%透明黑色 */
    }

    /* 不透明的 ::before 伪元素 */
    .div::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: red; /* 这里假设你想给伪元素一个不透明的颜色，例如红色 */
    opacity: 1; /* 明确设置为完全不透明 */
    z-index: -1; /* 可能需要调整 z-index 使其位于 div 内容之下 */
    }

    </style>
</head>
<body>

<div class="container">

    <div class=".div" style="background-color: red;">
        aaa
    </div>
    <table class="table table-bordered table-hover">
       <div style="height: 200px;"></div>
        <tbody>
            <tr>
                <td class="triangle-cell">Row 1, Cell 1</td>
                <td>Row 1, Cell 2</td>
                <td >Row 1, Cell 3</td>
            </tr>
            <tr>
                <td>Row 2, Cell 1</td>
                <td>Row 2, Cell 2</td>
                <td>Row 2, Cell 3</td>
            </tr>
        </tbody>
    </table>
</div>

</body>
</html>
